import React,{Component} from 'react';
import './mmms.scss';
import {Icon} from 'antd';
import {Link} from 'react-router-dom';
import axios from 'axios';
// import Itemm from './itemm';
class Mmms extends Component{
    //初始化数据
    constructor(){
        super();
        this.state = {
            listArrq:[],
            listarr:[
                {'id':0,'name':'洁面卸妆','group_id':12983,'type':true},
                {'id':1,'name':'水乳面霜','group_id':12984,'type':false},
                {'id':2,'name':'精华眼霜','group_id':12985,'type':false}
            ],
            page:1,
            end:false,//是否到最后 ，false 还没到最后
            type:false,//加载是否显示图标
            group_id:12983
        }
    }
    componentDidMount(){

        //调用滚动事件
        this.Scroll();
        //调用moreData获取数据
        this.moreData();
    }

    backFunc=()=>{
        this.props.history.go(-1)
        // console.log("shfkashfkjsahfkjsa")
    }
    //组件未渲染完成，就销毁时的报错的解决方式
	componentWillUnmount(){
		this.setState=(state,callback)=>{
			return;
        }         
    }
    tapswih=(id,group_id)=>{
        // console.log(id);
        let newwarr = this.state.listarr;
        for(var i=0;i<newwarr.length;i++){
            if(i===id){
                newwarr[i].type = true;
            }else{
                newwarr[i].type = false;
            }
            this.setState({
                listarr:newwarr
            })
        };
        //获取数据
		this.getData(group_id);
    }
    Scroll(){
        let _this=this;
        
        window.onscroll = function(){
            //获取滚动高度
            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            //获取窗口可视高度
            let windowHeight = document.documentElement.clientHeight; 
            //获取当前页面总高度,
            //不能有绝对定位，否则只取到可视窗口的高度
           
            let scrollHeight = document.body.scrollHeight;
            // console.log(scrollHeight-scrollTop +":"+windowHeight);
            if(scrollHeight-scrollTop <= windowHeight){
                //获取数据
                _this.moreData(_this.state.page +1);
                //更新当前页
				_this.setState({
					page:_this.state.page+1
				})
            }
        }
    }
    getData(group_id){
	 axios.get('item/ws/group_list?current_page=1&page_size=24&group_id='+group_id+'&device_id=20b178f0-0fc0-11e9-8e3d-1ff5ed74673e').then(res=>{
		// axios.get('item/ws/group_list?current_page=1&page_size=24&group_id=13174&device_id=ee156a50-1479-11e9-9ebf-05d42e07a6db').then(res=>{

                   
			// console.log(res);
			this.setState({
				listArrq:res.data.data.item_list
			})
			
		})
	}
    moreData(i){
        if(!this.state.end){
            this.setState({
                type:true
            })
            axios.get('item/ws/group_list?current_page='+i+'&page_size=24&group_id='+this.state.group_id+'&device_id=04709070-0ff9-11e9-a72f-914ada513a5c').then(resp=>{
                // console.log(resp.data.data.item_list);
                //判断是否是没有数据了
                if(resp.data.data.item_list === undefined){
                    this.setState({
                        end:true,
                        type:false
                    })
                }else{
                    let oldarr = this.state.listArrq;
                    let newArr = [];
                    //将数据追加到原有数组后面
                    newArr = oldarr.concat(resp.data.data.item_list);

                    this.setState({
                        listArrq:newArr,
                        type:false
                    })
                    // console.log(this.state.listArrq)
                }
                

            })
        }         
    }

    //跳转详情页
    // toDetailsFunc=()=>{
    //     this.props.history.push('/details')
    // onClick={this.toDetailsFunc}
    // }
    render(){
        return (
            <div className="mmms">
                <div className="mmms_a">
                    <img src="https://image.watsons.com.cn//upload/2760bd39.jpg" alt="dd"/>
                    <div><div className="dddddd" onClick={this.backFunc}><Icon type="left" className="leftBack" /></div><div className="leftBackq">新宠精致美肌</div></div>
                </div>
                <div className="mmms_b">
                    <ul>
                        {
                            this.state.listarr.map((item,index)=><li className={item.type?"active":""} onClick={()=>this.tapswih(item.id,item.group_id)} key={index} >{item.name}</li>)
                        }
                    </ul>
                </div>
                <div className="mmms_c">
                    <ul>
                        {
                            this.state.listArrq.map((item,key)=><li key={key}>
                                {/*<Link to={"/details/"+item.item_id}>*/}
                                <Link to={{pathname:'details',search:'?item_id='+item.item_id+'&app_price='+item.min_app_price+'&market_price='+item.min_market_price}}>
                                    <img src={item.over_image_url} alt={item.item_short_name} />
                                    <div>{item.item_id}/{item.min_app_price}/{item.min_market_price}</div>
                                </Link>
                            </li>)
                        }
                    </ul>
                </div>
                {this.state.type?<div className='daodila1'><Icon type="sync" spin />正在加载...</div>:""}
                {this.state.end?<div className='daodila'>到低辣，小姐姐...</div>:""}
                
            </div>
        )
    }
}
export default Mmms;